<template>
	<view class="person">

		<!-- 加载动画 -->
		<loading
			ref="loading"
			:custom="false"
			:shadeClick="true"
			:type="1"
			:shadeShow="false"
			>
			<!-- <view class="test">自定义</view> -->
		</loading>
			<view class="person-title" style="margin-top: 20rpx;">
				原密码
			</view>
			<input type="text" value="" placeholder="请输入您的原密码" password v-model="oldPassword" placeholder-style="color: rgba(35,39,55,.3);"/>

			<view class="person-title">
				新密码
			</view>
			<input type="text" value="" placeholder="请输入您的新密码" password v-model="newPassword" placeholder-style="color: rgba(35,39,55,.3);"/>


			<view class="person-title">
				确认密码
			</view>
			<input value="" placeholder="请确认您的新密码" password v-model="confirmNewPassword" placeholder-style="color: rgba(35,39,55,.3);"/>

		<view class="submit" @click="submit">
			更改密码
		</view>
	</view>
</template>

<script>
			import baseUrl from '../../utils/config.js'

	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components:{
			loading
		},

		data() {
			return {
				newPassword: '',
				oldPassword: '',
				confirmNewPassword: '',

				submitFlag:1,
			};
		},
		methods: {
			close:function(){
				this.$refs.loading.close();
			},
			open:function(){
				this.$refs.loading.open();
			},
			submit() {
				if(this.submitFlag==1){
					this.submitFlag=0;
					let that = this;
					let url='user/changePassword'
					
					if (this.oldPassword == '') {
						uni.showToast({
							title: '原密码不能为空',
							duration: 2000,
							icon: 'none',
							success:function(){
								that.submitFlag=1
							}
						});
						return;
					}
					if (this.oldPassword !== uni.getStorageSync('passWord')) {
						uni.showToast({
							title: '原密码输入错误',
							duration: 2000,
							icon: 'none',
							success:function(){
								that.submitFlag=1
							}
						});
						return;
					}
					if (this.newPassword === '') {
						uni.showToast({
							title: '新密码不能为空',
							duration: 2000,
							icon: 'none',
							success:function(){
								that.submitFlag=1
							}
						});
						return;
					}
					if (this.newPassword !== this.confirmNewPassword) {
						uni.showToast({
							title: '两次输入不一致',
							duration: 2000,
							icon: 'none',
							success:function(){
								that.submitFlag=1
							}
						});
						return;
					}
					if (this.newPassword === this.oldPassword) {
						uni.showToast({
							title: '新密码不能为原密码',
							duration: 2000,
							icon: 'none',
							success:function(){
								that.submitFlag=1
							}
						});
						return;
					}
					that.open();
					uni.request({
						url: baseUrl + url,
						data: {
							userId: uni.getStorageSync('userId'),
							newPassword: this.newPassword,
							oldPassword: this.oldPassword,
						},
						header: {
							"Content-Type": "application/json",
							'token': uni.getStorageSync('token')
						},
						method: "POST",
						success: (res) => {
							that.close();
							if (res.data.status == 200) {
								uni.showToast({
									title: '密码修改成功',
									duration: 2000,
									icon: 'none',
									
								});
								
								let url='user/logout'
								uni.request({
									url: baseUrl+url, //仅为示例，并非真实接口地址。
									data: {
									},
									//formdate格式
									header: {
										"Content-Type": "application/x-www-form-urlencoded",
										'token': uni.getStorageSync('token')
									},
									method: "POST",
									success: (res) => {
										that.submitFlag=1;
										if (res.data.status == 200) {	
											uni.removeStorageSync('token')
											uni.removeStorageSync('passWord');//检测项目二级权限
											uni.redirectTo({
											    url: '../index/index'
											})
										} else if(res.data.status == 401){
											that.submitFlag=1;
										uni.showToast({
											title: 'token过期，请重新登录',
											duration: 2000,
											icon: 'none',
											success:function(){
												uni.redirectTo({
													url: '../index/index'
												})
											}
										});
										
									}
										else {
											let msg=res.data.msg
									if(msg!=undefined){
													uni.showToast({
														title:msg,
														duration: 2000,
														icon: 'none',
														success:function(){
															that.submitFlag=1;
														}
													});
												}else{
													uni.showToast({
														title:'服务器故障',
														duration: 2000,
														icon: 'none',
														success:function(){
															that.submitFlag=1;
														}
													});
												}
										}
									},
									fail: (res) => {
										
										uni.showToast({
											title: '连接错误，请检查网络设置',
											duration: 2000,
											icon: 'none'
										});
										that.submitFlag=1;
									}
								});
							} else if (res.data.status == 401) {
								uni.showToast({
									title: 'token过期，请重新登录',
									duration: 3000,
									icon: 'none',
									success:function(){
										setTimeout(function(){
											uni.redirectTo({
												url: '../index/index'
											})
											that.submitFlag=1;
										},1000)
									}
								});
							} else {
								let msg = res.data.msg
								if(msg!=undefined){
									uni.showToast({
										title:msg,
										duration: 2000,
										icon: 'none',
										success:function(){
											that.submitFlag=1;
										}
									});
								}else{
									uni.showToast({
										title:'服务器故障',
										duration: 2000,
										icon: 'none',
										success:function(){
											that.submitFlag=1;
										}
									});
								}
								
							}
						},
						fail: (res) => {
							
							that.close();
							uni.showToast({
								title: '连接错误，请检查网络设置',
								duration: 2000,
								icon: 'none',
								success:function(){
									that.submitFlag=1;
								}
							});
						}
					});
				}


			}
		}
	}
</script>

<style lang="scss">
	.person {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		background-color: #f0f0f0;
		// background-color: #ccc;
		font-size: 32rpx;
		position: relative;
		&-title{
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 40rpx;
			font-size: 30rpx;
			color: rgba(35, 39, 55, 0.9);
			
		}
		input{
			background-color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;
			padding-left: 40rpx;
		}
	}

	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: linear-gradient(to right, #16b0be, #1095cd);
		min-height: 80rpx;
		width: 80%;
		margin: 0 auto;

		margin-top: 50rpx;

		color: white;
		border-radius: 45rpx;
	}
</style>
